<script setup lang="ts">
import { defineProps, ref } from "vue";
import {ImagePreview} from 'vant';
defineProps<{
  name: string;
  value: string[];
}>();
const imgIndex = ref(0);
const show = ref(false);
function preview(val: number): void {
  console.info(val);
  show.value = true;
  imgIndex.value = val;
}
</script>
<template>
  <div class="name">
    {{ name }}
  </div>
  <div class="imgContinal">
    <div
      class="imgbox"
      @click="preview(index)"
      v-for="(item, index) in value"
      :key="index"
    >
      <img :src="item" />
    </div>
  </div>
  <ImagePreview
    v-model:show="show"
    :images="value"
    :start-position="imgIndex"
  >
  </ImagePreview>
</template>
<style scoped lang="scss">
.name {
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 10px;
  font-size: 14px;
}
.imgContinal {
  @include imgContinal();
}
</style>
